{% extends 'base.html' %}

{% block scripts %}
  <script>
    const known_towers = {{known_towers|tojson}};
    const sightings  = {{sightings|safe}};
  </script>
  <script>
  $(document).ready(function(){
    let tdata = "";
    for(const tower of sightings){
      tdata += `
        <tr id=${tower.id}>
            <td></td>
            <td><a href="/detail/${ tower.id }">Ⓐ</a></td>
            {% for col in showcols %}
              {% if col == 'cid' %}
                <td><a href='/cid_detail/${tower.cid}'>${ tower.cid }</a></td>
              {% else %}
                <td>${ tower.{{col}} }</td>
              {% endif %}
            {% endfor %}
        </tr>
      `
    }
    $('tbody#hits').html(tdata);
    });
  </script>
  <script>
    var map;
    function initMap() {
      var bounds = new google.maps.LatLngBounds();
      var trilat = new google.maps.LatLng({{trilat[0]}}, {{trilat[1]}});
      map = new google.maps.Map(document.getElementById('map'), {
        center: trilat,
        zoom: 15
      });

      bounds.extend(trilat);
      new google.maps.Marker({
        position: trilat,
        map: map,
        label:'Trilateration',
        title:""+trilat.lat()+", "+trilat.lng()+""
      });

      var point;
      var points = [];
      var opacity = 0.1
      for(const t of known_towers) {
          point = new google.maps.LatLng(t.lat, t.lon);
          new google.maps.Marker({position: point, map: map, title:t.description, icon:"http://icons.iconarchive.com/icons/icons8/windows-8/24/Industry-Radio-Tower-icon.png"});
      }

      for(const t of sightings) {
        // Don't display towers which have no GPS data attached
        if (t.lat != 0 && t.lon != 0) {
          point = new google.maps.LatLng(t.lat, t.lon);
          //new google.maps.Marker({position: point, map: map, title:""+point.lat()+", "+point.lng()+"" });
          points.push(point);
          new google.maps.Circle({
            strokeColor: '#00CCCC',
            strokeOpacity: opacity,
            strokeWeight: 1,
            fillColor: '#00CCCC',
            fillOpacity: opacity,
            map: map,
            center: point,
            radius: t.est_dist
          });
        }
      }
      for (let p of points) {
        bounds.extend(p);
      }
      map.fitBounds(bounds);
    }
  </script>


{% endblock %}

{% block container %}
  <div id="map" class="jumbotron"></div>
  <h2>{{type}} Details</h2>
  <div class='bs-component table-responsive'>
    <table class="table table-striped">
      <tbody>
      {% for k in details %}
        <tr><th scope='row'>{{ k.replace('_', ' ').title() }}</th><td>
            {% if k == 'enodeb_id' %}
              <a href='/enb_detail/{{ details[k] }}'>{{ details[k] }}</a>
            {% else %}
              {{ details[k] }}
            {% endif %}
          </td></tr>
      {% endfor %}
      <tr><th scope='row'>Trilateration</th><td>{{trilat[0]}}, {{trilat[1]}}</td></tr>
      <tbody>
    </table>
  </div>
  <h2>{{details['number_of_sightings']}} Sightings for This {{type}}</h2>
  <div class='bs-component table-responsive'>
    <select id="new-class">
      <option value="unknown">unknown</option>
      <option value="legitimate">legitimate</option>
      <option value="small_cell">small_cell</option>
      <option value="suspicious">suspicious</option>
      <option value="CSS">CSS</option>
    </select>
    <table class="table table-hover table-striped data-table-select table-sm">
      <thead class="thead-light ">
      <tr>
          <th></th>
          <th>Ⓐ</th>
          {% for p in showcols%}
            {% if p == "suspiciousness" %}
              <th>sus</th>
            {% elif p == "sector_id" %}
              <th>sid</th>
            {% elif p == "frequency" %}
              <th>Mhz</th>
            {% else %}
              <th>{{ p }}</th>
            {% endif %}
          {% endfor %}
      </tr>
      </thead>
      <tbody id='hits'>
      </tbody>
    </table>
  </div>
{% endblock %}
